<template>
  <el-popover v-bind="$attrs" v-on="$listeners" :popper-class="appTheme">
    <template #reference>
      <slot name="reference"></slot>
    </template>
    <slot></slot>
  </el-popover>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "Popover",
  computed: {
    appTheme() {
      return this.$store.state.settings.appTheme;
    },
  },
};
</script>
<style lang="scss">
@import "@/style/variables.scss";
.el-popper.theme-dark {
  background-color: #fff;
  border-color: #eee;
  color: #fff;
}

.el-popper.theme-dark[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #eee;

  &::after {
    border-bottom-color: #fff;
  }
}

.el-popper.theme-dark[x-placement^="left"] .popper__arrow {
  border-left-color: #eee;

  &::after {
    border-left-color: #fff;
  }
}

.el-popper.theme-dark[x-placement^="right"] .popper__arrow {
  border-right-color: #eee;

  &::after {
    border-right-color: #fff;
  }
}
.el-popper.theme-dark[x-placement^="top"] .popper__arrow {
  border-top-color: #eee;

  &::after {
    border-top-color: #fff;
  }
}
</style>
